﻿<!DOCTYPE html>
<html lang="en">
<!-- container-fluid -->

<head>
	<title>风力发电</title>
	<meta charset="UTF-8" />
	<meta name="author" content="order by dede58.com" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
	<link rel="stylesheet" href="css/fullcalendar.css" />
	<link rel="stylesheet" href="css/unicorn.main.css" />
	<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>


	<div id="header">
		<h1><a href="./dashboard.html">风力发电站监测</a></h1>
	</div>

	<div id="style-switcher">
		<i class="icon-arrow-left icon-white"></i>
		<span>Style:</span>
		<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
		<a href="#blue" style="background-color: #2D2F57;"></a>
		<a href="#red" style="background-color: #673232;"></a>
	</div>

	<div id="content">
		<div id="content-header">
			<h1>控制台</h1>

		</div>
		<div id="breadcrumb">
			<a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 首页</a>
			<a href="#" class="current">控制台</a>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12 center" style="text-align: center;">
					<ul class="stat-boxes">
						<li>
							<div class="left peity_bar_good"><span>2,4,9,7,12,10,12</span>+20%</div>
							<div class="right">
								<strong id="speed"></strong>
								风速m/s
							</div>
						</li>
						<li>
							<div class="left peity_bar_neutral"><span>20,15,18,14,10,9,9,9</span>0%</div>
							<div class="right">
								<strong id="dir"></strong>
								风向(角度)
							</div>
						</li>
						<li>
							<div class="left peity_bar_bad"><span>3,5,9,7,12,20,10</span>-50%</div>
							<div class="right">
								<strong id="temp"></strong>
								温度℃
							</div>
						</li>

					</ul>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div class="widget-box">
						<div class="widget-title"><span class="icon"><i class="icon-signal"></i></span>
							<h5>峰值监测</h5>
							<div class="buttons"><a href="#" class="btn btn-mini"><i class="icon-refresh"></i> 状态</a>
							</div>
						</div>
						<div class="widget-content">
							<div class="row-fluid">

								<div class="span12">
									<div style="height: 400px" id="chart"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="js/excanvas.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.flot.min.js"></script>
	<script src="js/jquery.flot.resize.min.js"></script>
	<script src="js/jquery.peity.min.js"></script>
	<script src="js/unicorn.js"></script>
	<script src="js/unicorn.dashboard.js"></script>
	<script src="echarts.js"></script>
	speed

	<script>

		setInterval("getlog()",1000)

		var totalFlowRate = echarts.init(document.getElementById('chart'));
		var xAxisData = [];
		var yAxisData = [];
		for (var i = 500; i > 0; i--) {
			xAxisData.push(i + "秒前");
		}
		for (i = 1; i < 501; i++) {
			yAxisData.push(null);
		}
		var totalFlowRateOption = {
			animation: false,
			title: {
				text: '风速max'/*,
        left:"110px"*/ },
			tooltip: {
				trigger: 'axis',
				axisPointer: { type: 'cross' }
			},
			grid: {
				left: 50/*"50px"*/,
				right: 15/*"15px"*/
			},
			legend: {
				data: ['当前风速']
			},
			xAxis: {
				boundaryGap: false,
				data: xAxisData
			},
			yAxis: { boundaryGap: false },
			series: {
				symbol: "none",/*去掉小圆点*/
				name: '当前风速',
				type: 'line',
				data: yAxisData/*,             smooth:true//显示为平滑的曲线*/
			}
		};

		totalFlowRate.setOption(totalFlowRateOption);
		var logtable = [];

		function getlog() {
			$.ajax({
				type:"POST",
				url: "/getdeviceslist",
				contentType:'application/json',
				data:JSON.stringify({}),
				success: function (result) {
					console.log(result)
					if (result.code == 1) {
						console.log(result)
						$("#speed").html(result.info.speed)
						$("#dir").html(result.info.direction)
						$("#temp").html(result.info.temperature)

						logtable.push(result.info)
						yAxisData.push(Math.round( result.info.speed ));
						if(yAxisData.length>500) {
							yAxisData.shift();
						}
						totalFlowRate.setOption(totalFlowRateOption);
					} else {
						console.log("fail get data")
					}
				}
			});
		}
	</script>

</body>

</html>